<template>
  <el-dialog v-model="visible" :title="title" width="1200" show-footer show-zoom resize @close="close">
    <template #default>
      <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-input v-model="form.order_no" placeholder="相关单号" class="w-40"></el-input>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 150px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
      </template>
    </VTable>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal" lang="jsx">
import { getSeawarLog } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const emits = defineEmits(['query'])

const props = defineProps({
  wareDataList: {
    type: Array,
    default: [],
  },
})

const data = reactive({
  form: {},
  title: '',
  handleType: null,
})
const { form, title, handleType } = toRefs(data)

const statusMap = new Map([
  ['view', '库存记录'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  // if (id) getDetail(id)
}

const timeOption = [
  { label: "更新时间", value: "create_time" },
]

const tableRef = ref()
const tableOptins = reactive({
  height: 500,
  rowConfig: { height: 60 },
  formConfig: {
    data: {
      timeRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'op_type_cn', title: '操作类型', width: 120
    },
    {
      field: 'order_no', title: '相关单号', width: 210
    },
    {
      field: 'op_transit_num', title: '当前在途', width: 300
    },
    {
      field: 'after_transit_num', title: '在途变化', width: 120
    },
    {
      field: 'op_num', title: '当前可用', width: 120
    },
    {
      field: 'after_num', title: '可用变化', width: 120
    },
    {
      field: 'op_lock_num', title: '当前锁库', width: 120
    },
    {
      field: 'after_lock_num', title: '锁库变化', width: 120
    },
    {
      field: 'create_user', title: '操作人', width: 120
    },
    {
      field: 'create_time', title: '更新时间', width: 180
    },
    {
      field: 'remark', title: '备注', width: 120
    },
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await getSeawarLog({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})

const close = () => {
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
.image-item{
  width: 60px;
  height: 60px;
}
.form-item{
  padding: 6px 0;
  font-size: 16px;
  color: #333;
  span{
    color: #666
  }
}
</style>
